

<template>
<div>
  <el-dialog title="提示" v-model="dialogVisible" width="30%">
    <span>确认要删除该条数据吗?</span>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
    </template>
  </el-dialog>
  <div class="data-content1">
    <div class="tool-add">
      <el-button type="primary" @click="addView">新增</el-button>
      <el-button type="primary" plain :disabled="selection.length!=1" @click="resetPassword">重置密码</el-button>
    </div>

    <el-table v-loading="loading" :data="tableData.data" @sort-change="changeTableSort"
              @selection-change="selectionChange"
              stripe
              style="width: 100%;font-size: 12px;">
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="名称" prop="name"   width="160">
      </el-table-column>
      <el-table-column label="商家名称" prop="shopName" width="200">
      </el-table-column>
      <el-table-column label="创建时间" prop="addDate">
      </el-table-column>
      <el-table-column width="210" align="center" fixed="right" label="操作">
        <template #default="scope">
          <el-button text :icon="deleteIcon" class="operation_bt" type="danger" style="cursor: pointer;"
                     @click="deleteData(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                     :page-size="tableData.size" :pager-count="5"
                     layout="total, sizes, prev, pager, next, jumper" :page-count="tableData.totalPage"
                     :total="tableData.total" @size-change="sizeChange" @current-change="pageChange">
      </el-pagination>
    </div>
  </div>


  <permission-dialog v-if="dialog.permission" ref="permissionDialog"
                     @closed="dialog.permission=false"></permission-dialog>


  <el-dialog v-model="showDialog">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="电话" prop="age">
        <el-input v-model.number="ruleForm.phone" readonly />
      </el-form-item>
      <el-form-item label="账号密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()"
        >修改密码</el-button
        >
        <el-button @click="showDialog=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog v-model="showAddDialog">
   <component-staff-add v-if="showAddDialog" :shop="shop" @closed="showAddDialog=false" @success="showAddDialog=false"></component-staff-add>
  </el-dialog>

</div>
</template>
<script>
import {Delete, Edit} from '@element-plus/icons-vue'
import common from "@/mixins/common.js";
import permissionDialog from "./permission.vue";
import componentStaffAdd from "./component_staff_add.vue";


export default {
  name: "shopRole_index",
  mixins: [common],
  components: {permissionDialog,componentStaffAdd},
  data() {
    return {
      selection: [],
      Edit: Edit,
      deleteIcon: Delete,
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialog: {
        save: false,
        permission: false
      },
      loading: false,
      tableData: {
        size: 0,
        total: 0,
        totalPage: 0,
        data: []
      },
      searchObject: {
        no: 1,
        size: 10,
        sortField: "id",
        sortMethod: "desc",
        shop: ''
      },
      showDialog:false,
      showAddDialog:false,
      shop:"",
      ruleForm:{
        id:"",
        password:"",
        password2:"",
        phone:""
      },
      rules: {
        password: [
          {required: true, message: '请输入登录密码', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号码', trigger: 'blur'}
        ]
      }
    }
  },
  mounted() {
    this.searchObject.shop = this.$route.query.id;
    this.shop = this.$route.query.id;

    this.getSearchList();

  },
  methods: {
    async getSearchList() {
      this.loading = true;
      let data = this.searchObject;
      let res = await this.$http.form("/shopStaff/search", data);
      if (res.code === 200) {
        this.tableData = res;
      }
      this.loading = false;
    },
    selectionChange(selection) {
      this.selection = selection;
    },
    //权限设置
    resetPassword() {
      this.showDialog=true;
      this.ruleForm.id=this.selection[0].id;
      this.ruleForm.phone=this.selection[0].phone;
    },
    async submitForm(){
      try {
        let valid = await this.$refs["ruleFormRef"].validate();
        if (!valid) {
          return;
        }
      } catch (e) {
        return;
      }
      let param=this.ruleForm;
      let res = await this.$http.form("/shopStaff/restPassword", param);
      if (res.code === 200) {
        this.$message({
          message: '重置密码成功',
          type: 'success'
        });
        this.showDialog=false;
      }else{
        this.$message.error(res.msg);
      }
    },
    addView() {
      this.showAddDialog=true;
    },
    showView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'view',
        query: data
      });
    },
    editView(row) {
      let data = {};
      data.id = row.id;
      this.$router.push({
        path: 'update',
        query: data
      });
    },
    deleteData(row) {
      this.selectId = row.id;
      this.dialogVisible = true;
    },
    clearSearch() {
      this.searchObject.key = "";
      this.searchObject.name = "";
      this.searchObject.shop = "";
    },
    async handleClose() {

      this.dialogVisible = false;
      if (this.selectId) {
        let params = {};
        params.id = this.selectId;
        let res = await this.$http.form("/shopStaff/delete", params);
        if (res.code === 200) {
          this.$message({
            message: '删除数据成功',
            type: 'success'
          });
          await this.getSearchList();
        } else {
          this.$message.error(res.msg);
        }
      }

    }

  },
}
</script>
<style scoped>

</style>
